<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://api.map.baidu.com/api?v=3.0&ak=XOcu5rKzcEo3xTAQz3F6rA3oUO1lbcaq"></script>
</head>

<body>
    <div id="container" style="width: 1000px;height: 500px;background-color: antiquewhite;margin: 0 auto;"></div>
    <div style="display: flex;justify-content: align-between;">
        <span>
            <div>
                <span style="font-size: 27px;">大概<b id="times"></b>送达</span>
            </div>

            <div style="color:red;font-size:22px;">
                <p>超市补偿</p>
                <p>超过10分钟赠送100积分</p>
            </div>
        </span>

        <span style="font-size: 27px;margin-left: 191px;margin-top: 102px;">
            <b id="mi"></b>
        </span>

    </div>

</body>

<script>

    let urlParams = new URLSearchParams(window.location.search)

    //创建地图实例
    var map = new BMap.Map("container");

    // 设置中心点坐标
    var point = new BMap.Point(116.404, 39.915);

    // 地图初始化

    // 设置标记对象
    var marker = new BMap.Marker(point);

    // 创建标注

    // map.addOverlay(marker);

    // 地图缩放
    map.enableScrollWheelZoom(true);

    // 平移控件
    map.addControl(new BMap.NavigationControl())

    // 地图类型
    map.addControl(new BMap.MapTypeControl())


    // 打开信息窗口

    let num1 = []

    // 创建地址解析器实例     
    var myGeo = new BMap.Geocoder();

    // 将地址解析结果显示在地图上，并调整地图视野
    // let addnu = []


    // 创建一个人的坐标
    let point2 = new BMap.Point(115.490696, 38.8579735)

    let marker2 = new BMap.Marker(point2)

    map.addOverlay(marker2)

    // 将标注添加到地图中

    marker2.addEventListener("click", function () {
        map.openInfoWindow(infoWindow, point2);
    });

    let options = {
        width: 200,
        height: 140,
        title: "地图标题"
    }

    var infoWindow = new BMap.InfoWindow("World", options);  // 创建信息窗口对象 



    var driving = new BMap.DrivingRoute(map, {
        renderOptions: {
            map: map,
            autoViewport: true
        }
    })

    function gos() {

        myGeo.getPoint(urlParams.get("address").split(",")[0] + urlParams.get("address").split(",")[1] + urlParams.get("house"), function (points) {
            if (points) {
                map.centerAndZoom(new BMap.Point(points.lng, points.lat), 15);
                var marker = new BMap.Marker(points.lng, points.lat);
                map.addOverlay(marker);

                driving.search(point2, new BMap.Point(points.lng, points.lat));

                var distance = Math.ceil(map.getDistance(new BMap.Point(points.lng, points.lat), point2)) / 1000;
                let timess = urlParams.get("time").split(" ")[0]
                // console.log(window.location)

                console.log("所用时间", Math.ceil(distance / 80))

                times.innerText = `${timess.split("/")[1]}:00-${Number(timess.split("/")[1]) + Math.ceil(distance / 80)}:00`
                mi.innerText=`全程需要${distance}公里`
            }
        }, urlParams.get("address").split(",")[0]);
    }
    gos()

</script>

</html>